import { useDrop } from 'react-dnd';

import classnames from 'classnames';
import { DropElementLayout } from './DragDropStyle';

interface Props {
  accept: string[];
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  title?: React.ReactNode;
  endDrop?: (item: any, monitor?: any) => void;
}

export const DropElement: React.FC<Props> = (props) => {
  const { accept = 'Box', className, children, title, endDrop, style } = props;

  const [{ canDrop, isOver }, dropRef] = useDrop({
    accept,
    collect: (monitor: any) => ({
      isOver: !!monitor.isOver(),
      canDrop: !!monitor.canDrop(),
    }),
    drop: endDrop,
  });

  return (
    <DropElementLayout
      ref={dropRef}
      className={classnames('dropElement', className, {
        'can-drop': canDrop,
        'is-active': isOver && canDrop,
      })}
      style={style}>
      <div className="drop-title">{title}</div>
      <div className="drop-content">{children}</div>
    </DropElementLayout>
  );
};
